<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data">
      <v-coord type="rect" direction="LB" />
      <v-tooltip />
      <v-axis dataKey="x" :label="label" />
      <v-bar position="x*y" />
    </v-chart>
  </div>
</template>

<script>
  import {triggerWindowResizeEvent} from '@/utils/util'

  export default {
    name: 'Bar',
    props: {
      dataSource: {
        type: Array,
        required: true
      },
      yaxisText: {
        type: String,
        default: 'y'
      },
      title: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 254
      }
    },
    data() {
      return { padding: ['auto', 'auto', '40', '50'],label:{ offset: 12 },data:[] }
    },
    created() {
      const DataSet = require('@antv/data-set');
      let dv = new DataSet.View().source(this.dataSource);
      dv.transform({
        type: 'sort',
        callback(a, b) {
          return a.y - b.y > 0;
        },
      });
      this.data = dv.rows;
      console.log(this.data)
    },
    computed: {
    },
    mounted() {
      triggerWindowResizeEvent()
    }
  }
</script>